<script setup>
import { onMounted, reactive, defineEmits } from 'vue'
const user = reactive({
    username:'乔克***on',
    oldpwd:'',
    newpwd:''   
});
</script>

<template>
    <div class="pageWrapper">
        <p class="title">请设置新密码</p>
        <div class="set-pwd-form">
            <p class="tip">用户名:</p>
            <el-input  style="width:325px;height:40px;margin-top:5px;"  :placeholder="user.username" disabled="disabled" />
            <p class="tip">旧密码:</p>
            <el-input  style="width:325px;height:40px;margin-top:5px"  placeholder="请输入旧密码"  v-model="user.oldpwd" />
            <p class="tip">新密码:</p>
            <el-input  style="width:325px;height:40px;margin-top:5px"  placeholder="请输入新密码" v-model="user.newpwd"/>
        </div>
        <button class="bindbtn">确认更改</button> 
    </div>
</template>

<style scoped>
.pageWrapper {
    width: 95%;
    background-color: #fff;
    height: calc(100vh - 120px);
    margin: 0 auto;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 50px;
}
.title{
    font-size: 30px;
}
.tip{
    margin-top:20px ;
}
.bindbtn {
    width: 120px;
    height: 40px;
    background-color: #2E58FF;
    color: #fff;
    margin-top: 20px;
    border: #fff;
    cursor: pointer;
    border-radius: 5px;
}

</style>
